import React from 'react'
import { Button, Form, Input } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import Style from '../styles/login.less'
import { GetUserInfo, LoginApi } from '@/apis/user';
import { history } from 'umi';

type Props = {}

const Login = (props: Props) => {

	const onFinish = async (values: any) => {
		// 存储 token
		const res: any = await LoginApi(values)
		if (res.code == 200) {
			localStorage.token = res.token
		}
		// 存储用户信息
		const info: any = await GetUserInfo()
		if (info.code) {
			localStorage.userInfo = JSON.stringify(info.userInfo)
		}
		history.push('/home')
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log('Failed:', errorInfo);
	};
	return (
		<div className={Style.body}>
			<div className={Style.main}>
				{/* 左边图片 */}
				<div className={Style.img}>
					<img src="http://v4.crmeb.net/system_static/img/sw.3ef10e8b.jpg" alt="" />
				</div>
				{/* 右边 */}
				<div className={Style.card}>
					<img className={Style.logo} src="https://demo26.crmeb.net/statics/system_images/admin_login_logo.png" alt="" />
					{/* 表单 */}
					<Form name="basic" size='large' onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off">
						<Form.Item name="account" rules={[{ required: true, message: '请输入用户名' }]}>
							<Input value='admin' prefix={<UserOutlined className={Style.icon} />} />
						</Form.Item>

						<Form.Item name="pwd" rules={[{ required: true, message: '请输入密码' }]}>
							<Input.Password value='123456' prefix={<LockOutlined className={Style.icon} />} />
						</Form.Item>

						<Form.Item>
							<Button type="primary" htmlType="submit" block={true} >
								登录
							</Button>
						</Form.Item>
					</Form>
				</div>
			</div>
		</div>
	)
}

export default Login